/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-09-05 11:27:32
 */
<template>
      <div class="mapCon" id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "@/components/Charts/chart";
// mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },]
           */
var timeTicket = null;
var stockData = []; // 仓库数据
var itemPro = [];
export default {
  name: "index",
  components: { chart },
  props: {
    value: {
      type: Array,
      require: true
    }
  },
  watch: {
    value(newValue, oldValue) {
      if (timeTicket) {
        clearInterval(timeTicket);
      }
      this.fetchMap(newValue);
    }
  },
  mounted() {},
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(newValue) {
      var convertData = [];
      stockData = newValue.provinceStockList;
      newValue.provinceStockList.forEach(item => {
        var provinceId = 0;
        var provinceName = "";
        if (
          item.provinceName.indexOf("省") >= 0 ||
          item.provinceName.indexOf("市") >= 0
        ) {
          if (item.provinceName.indexOf("省")) {
            provinceId = item.provinceName.indexOf("省");
          } else {
            provinceId = item.provinceName.indexOf("市");
          }
          provinceName = item.provinceName.slice(0, provinceId);
        } else {
          provinceName = item.provinceName;
        }
        var obj = {
          name: provinceName,
          value: [item.provinceLng, item.provinceLat, item.inventory]
        };
        convertData.push(obj);
      });
      var option = {
        tooltip: {
          show: false,
          trigger: "item",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // 鼠标hover，阴影效果
              width: 0,
              color: "transparent"
            }
          },
          backgroundColor: "transparent",
          extraCssText: "text-align:left,background-color:transparent"
        },
        visualMap: {
          show: false,
          type: "continuous",
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["High", "Low"],
          inRange: {
            color: ["#104844"]
          },
          seriesIndex: [1],
          textStyle: {
            color: "white"
          },
          calculable: true
        },
        geo: {
          show: true,
          map: "china",
          zoom: 1.2,
          left: 60,
          top: 50,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#002C37",
              borderColor: "#017F3D"
            },
            emphasis: {
              areaColor: "#f0bd26"
            }
          }
        },
        series: [
          {
            name: "credit_pm2.5",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData,
            symbolSize: function(val) {
              return 5;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: "#28E787"
            },
            emphasis: {
              label: {
                color: "black"
              }
            }
          },
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            data: convertData,
            itemStyle: {
              normal: {
                areaColor: "#022545",
                borderColor: "#2d87c3"
              },
              emphasis: {
                areaColor: "#1e4274"
              }
            }
          }
          // {
          //   name: "",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: convertData,
          //   symbolSize: function(val) {
          //     return val[2] / 10;
          //   },
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke"
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: function(params) {
          //         return params.data.name;
          //       },
          //       position: "right",
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#01f5ff",
          //       shadowBlur: 10,
          //       shadowColor: "#01f5ff"
          //     }
          //   },
          //   zlevel: 1
          // }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
      var count = 0;
      var dataLength = option.series[0].data.length;
      if (timeTicket) {
        clearInterval(timeTicket);
      }
      mapChange();
      function mapChange() {
        self.mapChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1
        });
        self.mapChart.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: count % dataLength
        });
        // 哪个省
        itemPro = stockData[count % dataLength];
        // 省-》 库房 每隔6 s emit 一下
        self.$emit("on-map", itemPro.warehouseDetailList[0]);
        timeTicket = setInterval(changeStock, 6000);
        // 返回出事件
        count++;
      }
      var stockId = 0;
      function changeStock() {
        stockId++;
        self.$emit("on-map", itemPro.warehouseDetailList[stockId]);
        if (stockId > itemPro.warehouseDetailList.length) {
          clearInterval(timeTicket);
          stockId = 0;
          mapChange();
        }
      }
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 800px;
  min-width: 800px;
  float: left;
  position: fixed;
}
</style>
